<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" type="image/x-icon"
	href="${ctxPath}/static/images/lukk.ico" media="screen" />
<link rel="icon" href="${ctxPath}/static/images/lukk.ico"
	type="image/x-icon" />
<link rel="bookmark" href="${ctxPath}/static/images/lukk.ico"
	type="image/x-icon" />
<title>管理页面</title>

</head>
<body class="sticky-header"
	onload="indexmenu('${oneMenu}','${twoMenu}');">
	<%@ include file="../index/index.jsp"%>
	<section>
		<div class="main-content" style="overflow-y: auto">
			<!-- 地址栏-->
			<div class="page-heading">
				<h3>鹿客帮</h3>
				<ul class="breadcrumb">
					<li><a>员工统计 </a></li>
					<li class="active">订单统计</li>
				</ul>
			</div>
			<div class="panel-body" style="padding-bottom: 0px;">
				<div class="panel panel-default">
					<div class="panel-heading">查询条件</div>
					<div class="panel-body">
						<div class="panel-body" style="height: 65px">
							<form id="formSearch" class="form-horizontal">
								<div class="form-group" style="">
									<div class="form-inline col-md-1">
										<label> <input type="radio" value="0"
											onchange="changeCountTypeRadio(this)" name="countTypeRadio"
											checked>区域&nbsp;&nbsp;
										</label><label> <input type="radio" name="countTypeRadio"
											onchange="changeCountTypeRadio(this)" value="1">商家&nbsp;&nbsp;
										</label>
									</div>
									<div class="form-inline col-md-3">
										员工：<select id="employeeSelect" name="" data-width="220px"
											class="selectpicker show-tick form-control"
											data-live-search="false">
										</select>
									</div>
									<div class="form-inline col-sm-3">
										<div id="provinceSelectDiv">
											省份：<select id="provinceSelect" name="" data-width="220px"
												class="selectpicker show-tick form-control"
												data-live-search="false">
											</select>
										</div>
									</div>
									<div class="form-inline col-md-4">
										时间段：&nbsp;&nbsp;<input size="" type="text"
											style="width: 170px" class="form_datetime-adv form-control"
											readonly id="beginTime"> &nbsp;&nbsp;&nbsp; 到：<input
											size="" style="width: 170px" type="text" readonly
											class="form_datetime-adv form-control" id="endTime">
									</div>
									<div class="form-inline col-md-1" style="text-align: left;">
										<button type="button" style="margin-left: 50px" id="btn_query"
											class="btn btn-primary">查询</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div id="toolbar" class="btn-group">
					<button id="btn_edit" type="button" class="btn btn-default">
						<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>呵呵
					</button>
					<label> &nbsp;&nbsp;&nbsp;&nbsp;注释。</label>
				</div>
				<table id="tb_indent"></table>
			</div>
		</div>
	</section>
</body>
<!-- tables插件的引用 -->
<script type="text/javascript"
	src="${ctxPath}/static/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="${ctxPath}/static/js/bootstrap-table/bootstrap-table.js"></script>
<link href="${ctxPath}/static/js/bootstrap-table/bootstrap-table.css"
	rel="stylesheet" />
<script
	src="${ctxPath}/static/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="${ctxPath}/static/js/bootstrap-select/css/bootstrap-select.min.css">

<script
	src="${ctxPath}/static/js/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
	$(function() {
		$
				.post(
						'${ctxPath}/internalWorker/queryByPage?offset=0&limit=100&sort=id&order=desc',
						function(data) {
							$(data.rows).each(
									function(index, currData) {
										$("#employeeSelect").append(
												"<option value="+currData.id+">"
														+ currData.workerCode
														+ "</option>");
									});
							$('#employeeSelect').selectpicker('refresh');
							loadProvinceSelect();
						});
		var oTable = new TableInit();
		oTable.Init();
		$("#btn_query").click(function() {
			var opt = {
				pageNumber : 1,
				query : {
					offset : 0
				},
				url : '${ctxPath}/indent/queryByIWorker', //请求后台的URL（*）
			};
			//从新开始计数
			$("#tb_indent").bootstrapTable('refresh', opt);
		});
	});

	function changeCountTypeRadio(obj) {
		if ($(obj).val() == 1) {
			$("#provinceSelectDiv").hide();
		} else {
			$("#provinceSelectDiv").show();
		}
	}

	var TableInit = function() {
		var oTableInit = new Object();
		//初始化Table
		oTableInit.Init = function() {
			$('#tb_indent')
					.bootstrapTable(
							{
								method : 'post', //请求方式（*）
								toolbar : '#toolbar', //工具按钮用哪个容器
								striped : true, //是否显示行间隔色
								cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
								pagination : true, //是否显示分页（*）
								sortable : false, //是否启用排序
								sortName : 'subscribeTime',
								sortOrder : "desc", //排序方式
								queryParams : oTableInit.queryParams,//传递参数（*）
								sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
								pageNumber : 1, //初始化加载第一页，默认第一页
								pageSize : 8, //每页的记录行数（*）
								pageList : [ 8, 25, 50, 100 ],
								search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
								strictSearch : false,
								showColumns : false, //是否显示所有的列
								showRefresh : true, //是否显示刷新按钮
								minimumCountColumns : 2, //最少允许的列数
								clickToSelect : false, //是否启用点击选中行
								height : 600, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
								uniqueId : "workerId", //每一行的唯一标识，一般为主键列
								showToggle : true, //是否显示详细视图和列表视图的切换按钮
								cardView : false, //是否显示详细视图
								detailView : false, //是否显示父子表
								contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
								columns : [
										{
											field : 'indentId',
											title : '订单（ID/类型/状态）',
											width : '8%',
											align : "center",
											formatter : function(value, row,
													index) {
												var indentTypeStr;
												if (row.type = 0) {
													indentTypeStr = "测量";
												} else if (row.type = 1) {
													indentTypeStr = "安装";
												} else {
													indentTypeStr = "维修";
												}
												return value + "/"
														+ indentTypeStr + "/"
														+ row.indentStatus;
											}
										},
										{
											field : 'indentPrice',
											title : '订单价（商家/工人）',
											width : '8%',
											align : "center",
											formatter : function(value, row,
													index) {
												return row.merchantsPrice + "/"
														+ value;
											}
										},
										{
											field : 'merchantPhone',
											title : '下单人',
											width : '10%',
											align : "center",
											formatter : function(value, row,
													index) {
												return row.merchantName
														+ "<br/>" + value;
											}
										},
										{
											field : 'beginTime',
											title : '下单和预约时间',
											width : '10%',
											align : "center",
											formatter : function(value, row,
													index) {
												return value + "<br/>"
														+ row.subscribeTime;
											}
										} ]
							});
		};

		//得到查询的参数
		oTableInit.queryParams = function(params) {
			var areaCodes = "";
			if ($("#provinceSelect").val() == 0) {
				areaCodes = currentEmployeeProvince;
			} else {
				areaCodes = $("#provinceSelect").val();
			}
			var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
				limit : params.limit, //页面大小
				offset : params.offset, //页码
				order : params.order,
				sort : params.sort,
				beginTime : $("#beginTime").val(),
				endTime : $("#endTime").val(),
				areaCode : areaCodes,
				type : $("input[name='countTypeRadio']:checked").val(),
				iWorkerID : $("#employeeSelect option:checked").val()
			};
			return temp;
		};
		return oTableInit;
	};
	$("#employeeSelect").change(function() {
		loadProvinceSelect();
	});
	var currentEmployeeProvince = new String;
	function loadProvinceSelect() {
		$.post('${ctxPath}/province/queryAllocatedProvincesByIWorker', {
			iWorkerID : $("#employeeSelect").val()
		}, function(data) {
			$("#provinceSelect").empty();
			currentEmployeeProvince = "";
			if (data.length == 0) {
				$("#provinceSelect").append("<option value='0'>暂无省份</option>");
			} else {
				$("#provinceSelect").append("<option value='0'>全部省份</option>");
				$(data).each(
						function(index, currData) {
							currentEmployeeProvince = currentEmployeeProvince
									+ "," + currData.areaCode;
							$("#provinceSelect").append(
									"<option value="+currData.areaCode+">"
											+ currData.name + "</option>");
						});
				currentEmployeeProvince = currentEmployeeProvince.substr(1);
			}
			$('#provinceSelect').selectpicker('refresh');
		});
	}
</script>
<!--pickers initialization-->
<script
	src="${ctxPath}/static/js/bootstrap-datetimepicker/pickers-init.js"></script>
</html>
